import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import {reqregister} from '../../http/api'
import './Register.less'
export default class register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        phone: '',
        password: '',
        nickname:'',
      }
    }
  }
  changeUser(v,k){
    this.setState({
      user:{
        ...this.state.user,
        [k]:v,
      }
    })
  }
  async onRegister(){
    let {phone,password,nickname} = this.state.user;
    if(phone === '' || password === '' ||nickname === ''){
      Toast.show({content:'不能为空'});
      return;
    }
    let {data : res} = await reqregister(this.state.user);
    // console.log(res);
    if(res.code === 200){
       Toast.show({content:'注册成功'});
       this.props.history.push('/login');
    }
  }
  render() {
    let {user} = this.state
    return (
      <div className='login'>
        <Header title='注册' back></Header>
        <div className="loginBox">
        <div>{JSON.stringify(user)}</div>
          <h2>注册</h2>
          <Form layout='horizontal'>
            <Form.Item label='手机号' name='username'>
              <Input placeholder='请输入手机号' clearable value={user.phone} onChange={(v)=>this.changeUser(v,'phone')}/>
            </Form.Item>
            <Form.Item label='昵称' name='nickname'>
              <Input placeholder='请输入昵称' clearable value={user.nickname} onChange={(v)=>this.changeUser(v,'nickname')}/>
            </Form.Item>
            <Form.Item
              label='密码'
              name='password'
            >
              <Input
                placeholder='请输入密码'
                clearable
                type='password'
                value={user.password}
                onChange={(v)=>this.changeUser(v,'password')}
              />
            </Form.Item>
          </Form>
          <Button onClick={()=>this.onRegister()}  block shape='rounded' color='primary'>
            注册
          </Button>
        </div>

      </div>
    )
  }
}
